<template>
   <div class="main">
    <div class="on">
      <div class="content">
    <div class="upleft">
      <el-table :data="tableData" border style="width: 100%;height: 100%;">
        <el-table-column  type="index" label="" min-width="20">
        </el-table-column>
        <el-table-colum prop="number" label="设备号">
        </el-table-colum>
        <el-table-column prop="name" label="设备名称" >
        </el-table-column>
        <el-table-column prop="type" label="设备类型">
        </el-table-column>
        <el-table-column prop="IP" label="设备IP">
        </el-table-column>
        <el-table-column prop="status" label="设备状态">

        </el-table-column>
      </el-table>
    </div>
        <div class="upright">
          <button v-for="(index,item) in buttonRight" :key="index">
           <span> {{ item.iconname }}</span>
           <div>{{ name }}</div>
          </button>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="content">
        <div class="eight">
          <button
            v-for="(item, index) in buttons"
            :key="index"
            class="iconfont"
            :class="[item.icon, { isPointed: currentPoint === index }]"
            @click="change(item, index)"
          >
            <div class="buttonName">{{ item.name }}</div>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const currentPoint = ref(0);
const change = (item, index) => {
  currentPoint.value = index;
  console.log(index, "对啦对啦");
};
const isChecked = ref(false);
const tableData=ref([
  {
    number:"11",
    name:"设备名称",
    type:"type",
    IP:"55",
    status:"4545"
  },
  {
    number:"11",
    name:"设备名称",
    type:"type",
    IP:"55",
    status:"4545"
  },
  {
    number:"11",
    name:"设备名称",
    type:"type",
    IP:"55",
    status:"4545"
  }
])
const buttons = ref([
  {
    icon: "icon-shanchu",
    name: "删除",
  },
  {
    icon: "icon-grouping",
    name: "分类显示",
  },
  {
    icon: "icon-ditu",
    name: "设备定位",
  },
  {
    icon: "icon-bianji",
    name: "编辑",
  },
  {
    icon: "icon-piliangbianji",
    name: "批量编辑",
  },
  {
    icon: "icon-shangyiye",
    name: "上一页",
  },
  {
    icon: "icon-xiayiye",
    name: "下一页",
  },
  {
    icon: "icon-diyiyeshouyeshangyishou",
    name: "首页",
  },
  {
    icon: "icon-zuihouyiyemoyexiayishou",
    name: "末页",
  },
]);
</script>
<style lang="less" scoped>
@import url('../components/componentsless/deviceData.less');
@import url('../shebieicon/iconfont.css');
</style>